<template>
  <div class="case-poster flex">
    <div class="org-tree">
      <organization
        @onSearch="searchFun"
        :statisticalType="7"
        :statisticsNum="'buildingPosterNumber'"></organization>
    </div>
    <div class="integral-content">
      <p class="org-text">
        <span>{{ orgCheck.title }}</span>
      </p>
      <Tabs type="card" v-model="curState" :animated="false" name="tabs" @on-click="changeTab">
        <TabPane label="案场统计" name="case" tab="tabs" />
        <TabPane label="人员统计" name="user" tab="tabs" />
        <TabPane label="内容管理" name="content" tab="tabs" />
      </Tabs>
      <div class="flex flex-vertical-center choose-tab">
        <date-search ref="dateSearch" @oncheckDate="dateChooseClick"></date-search>
        <div style="width: 100%; height: 50px; padding-top: 7px">
          <dt-search ref="search" :xl="12" :xlBtn="12" @reset="onReset" :labelWidth="50">
            <Button type="primary" v-if="unlocking('0207030101')" @click="exportShort" :disabled="total == 0">
              导出
            </Button>
          </dt-search>
        </div>
      </div>
      <dt-grid ref="table" page :onFetch="onFetch" :cellHeight="60" />
    </div>
    <detail-modal ref="detailRef" />
    <preview-image :images="preViewImg" :showIndex="showIndex" ref="preViewImage"></preview-image>
    <dt-loading :loading="loading" />
  </div>
</template>
<script>
  import columnOpt from './opt/columns'
  import apiMgr from './opt/index'
  import organization from '../components/organzation.vue'
  import detailModal from './component/detail.vue'
  import dateSearch from './component/dateSearch'
  import searchOpt from './opt/search'
  export default {
    components: {
      organization,
      dateSearch,
      detailModal
    },
    data() {
      return {
        orgCheck: {},
        exportParams: {},
        curState: 'case',
        oldCurState: 'case',
        showIndex: 0,
        preViewImg: [],
        loading: false,
        total: 0,
        searchInfo: {
          startDate: '',
          endDate: '',
          housesId: ''
        }
      }
    },
    mounted() {
      this.loading = true
    },

    methods: {
      changeTab(val) {
        if (val == this.oldCurState) return false
        this.loading = true
        this.oldCurState = val
        this.onReset()
        this.$refs.table.init(this, new columnOpt(this))
        this.$refs.table.fetch(true)
      },
      exportShort() {
        apiMgr.exportListData(this.exportParams)
      },
      searchFun(orgCheck) {
        if (orgCheck) {
          this.orgCheck = { ...orgCheck }
        }
        this.$refs.dateSearch.initDateFun(2, this.curState)
      },
      onFetch(data) {
        let params = {
          ...data,
          ...this.orgCheck,
          curState: this.curState
        }
        this.exportParams = params
        return apiMgr.getListData(params).then((res) => {
          this.loading = false
          this.total = res.total
          return res
        })
      },
      dateChooseClick(data) {
        this.searchInfo.startDate = data.startTime
        this.searchInfo.endDate = data.endTime
        this.$refs.search.init(this.$refs.table, new searchOpt(this), this.searchInfo)
        this.$refs.table.init(this, new columnOpt(this))
        this.$refs.table.fetch()
      },
      onReset() {
        this.searchInfo = {
          housesId: ''
        }
        this.$refs.dateSearch.initDateFun(2, this.curState)
        this.$refs.search.init(this.$refs.table, new searchOpt(this), this.searchInfo)
      },
      checkFun(data) {
        data.expendTime = `${this.searchInfo.startDate.split(' ')[0]}~${
          this.searchInfo.endDate.split(' ')[0]
        }`
        data.startDate = this.searchInfo.startDate
        data.endDate = this.searchInfo.endDate
        this.$refs.detailRef.show(data)
      },
      delFun(data) {
        this.$Modal.confirm({
          title: '提示',
          content: '是否确认要删除该案场海报？',
          okText: '确认',
          cancelText: '取消',
          width: '450',
          onOk: () => {
            apiMgr.deleteById({ posterId: data.id }).then((res) => {
              this.$refs.table.fetch()
            })
          }
        })
      },
      lookImg(val) {
        this.preViewImg = val
        this.$refs.preViewImage.show()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .case-poster {
    padding: 20px;
    .integral-content {
      width: calc(100% - 270px);

      .org-text {
        margin: 10px 0;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }
</style>
